<template>
  <div id="VisoPage">
  <el-container class="frame">
    <el-header :style="{ position: 'fixed', top: '0', left: '0', right: '0', width: '100%', height: '30px' ,
    backgroundColor: 'rgb(188, 188, 188)'}">
      <div id="nakao" :style="{ backgroundColor: 'rgb(188, 188, 188)' }">
      <el-button class="toolBtnCls" @click="onToolClick($event, '0x030a0003')" >直线</el-button>
      <el-button class="toolBtnCls" @click="onToolClick($event, '0x030a0004')" type="primary">多段线</el-button>
      <el-button class="toolBtnCls" @click="onToolClick($event, '0x030b0001')" type="primary">矩形</el-button>
      <el-button class="toolBtnCls" @click="onToolClick($event, '0x03320001')" type="primary">圆柱</el-button>
      <el-button class="toolBtnCls" @click="onToolClick($event, '0x03330001')" type="primary">立方体</el-button>
    </div>
    </el-header>

    <el-container>
      <el-container style="height:100%">
   
        <el-main style="width:canvasHgt; height:canvasHgt" id="maincontainerID">
          <canvas :id="mainCanvasID" :width=canvasWid :height=canvasHgt
          :style="{width: { canvasWid }, height: { canvasHgt } }" ondragover="return false"
          class="canvasCtl"></canvas>
        </el-main>
    
      </el-container>
      <el-footer>
        <div id="statusbar" :style="{ backgroundColor: 'rgb(120, 120, 120)' }">000000000000000000000000000</div>
      </el-footer>
    </el-container>
  </el-container>
</div>
  
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { LGXCanvas } from '../lgxcanvas.js'
const mainCanvasID = ref('mainCanvasID')
const canvasWid = ref(1200)
const canvasHgt = ref(700)

onMounted(() => {
let ptr = new LGXCanvas(mainCanvasID.value, window.canvasManager, null, canvasWid.value, canvasHgt.value);
window.mainctl = ptr.mainctl;
})

var onToolClick = function (evt, item) {
console.log(evt);
window.mainctl.setTool(parseInt(item,16));
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}

ul {
list-style-type: none;
padding: 0;
}

li {
display: inline-block;
margin: 0 10px;
}

a {
color: #42b983;
}

.el-header,
.el-footer {
background-color: #B3C0D1;
color: #636262;
text-align: left;
line-height: 20px;
padding: 0px !important;
}

.el-lgx-footer {
background-color: #8c958c;
color: #0d0d0d;
text-align: left;
line-height: 30px;
padding: 0px !important;
}

.el-aside {
background-color: #D3DCE6;
color: #545353;
text-align: center;
line-height: 20px;
padding: 0px !important;
}

.el-main {
background-color: #8da3b6;
color: #333;
text-align: left;
line-height: 20px;
padding: 0px !important;
/* overflow: auto; */
}

body>.el-container {
margin-bottom: 0px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 840px;
}

.el-container:nth-child(7) .el-aside {
line-height: 700px;
}

.canvasCtl {
border: 3px solid rgb(107, 106, 106);
background-color: rgb(16, 137, 168);
}

/* 添加自定义按钮样式 */
.toolBtnCls {
border: 1px solid #dcdfe6; /* 按钮边框 */
border-radius: 4px; /* 圆角边框 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04); /* 阴影 */
margin: 0 10px; /* 按钮之间的间距 */
padding: 8px 15px; /* 按钮内部的内边距 */
}

/* 可以添加悬停效果 */
.toolBtnCls:hover {
background-color: #f5f7fa; /* 鼠标悬停时的背景色 */
}
</style>
